<!--
@function: 表格模板列-多项多选，包括单排和多排的排列
@author:HYS
@description:
选中改变之后，会触发value-change事件，传出参数为所选中的checkbox的一组id
-->
<template>
  <div class="checkbox-group-column">
     <!-- :style="'width:'+(numberOfColumns*checkboxWidth)+'px;'" -->
    <el-checkbox-group style="width:100%;" v-model="selecteds"  @change="$emit('value-change', $event)">
      <template v-for="checkbox in checkboxs">
        <el-checkbox :key="checkbox.id" :style="'width:'+checkboxWidth+'%'"
        class="checkbox-item" :border="border"
        :label="checkbox.id">
        <!-- :style="'width:'+checkboxWidth+'px;margin-left:0;'"  -->
          {{checkbox.value}}</el-checkbox>
      </template>
    </el-checkbox-group>
  </div>
</template>
<script>
// 计算选项中最长的字符，用来统一radio的宽度
var calcuMaxLength = function(radios) {
  var max = 0;
  radios.forEach((radio)=>{
    radio.value.length > max?(max = radio.value.length):(max);
  });

  return max;
}


export default {
  name:"CheckboxGroupColumn",
  props:{
    numberOfColumns: {// 列数-这里使用style的宽度来控制显示多少列
      type:Number,
      default:1
    },
    checkboxs:{// 多选选项的配置
      type:Array,
      default:()=>{
        return [];
      }
    },
    border:{// 是否显示选项的边框
      type:Boolean,
      default:true
    },
    fontFactor:{// 控制宽度的因子，因为汉字和字母数字宽度不同，所以需要灵活变动
      type:Number,
      default:16
    },
    selectedOuter:{// 用于从外部传入回显值
      type:Array,
      default:()=>{
        return [];
      }
    }
  },
  computed:{
    checkboxWidth:function() {// 宽度
      // var maxLength = calcuMaxLength(this.checkboxs);

      // return (maxLength+1)*this.fontFactor;

      return 100/this.numberOfColumns;
    }
  },
  watch:{
    "selectedOuter":{
      immediate:true,
      handler:function(){
        // console.log("enter1");
        // console.log("value=",this.selectedOuter);
        if(this.selectedOuter.length > 0){
          // console.log("enter2");
          this.selecteds = this.selectedOuter;
        }
      }
    }
  },
  data(){
    return {
      selecteds:[]// 当前选中的checkbox的id们
    };
  }
}
</script>
<style lang="scss">

.checkbox-group-column{
  display: flex;
  width:100%;
  margin:0;
  padding:0;
  .el-checkbox.is-bordered + .el-checkbox.is-bordered{//+代表取sibling元素
    margin:0;
  }
  .el-checkbox + .el-checkbox {
    margin-left: 0px;
  }
 .checkbox-item {
   white-space:normal;
   padding:10px 0;
   height:auto;// 自动调整高度，以适应换行
   border-radius: 0px;
   float:left;
   text-align: left;
 }
}

</style>
